<style>
    /* 左侧导航栏样式 */
    #sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 200px;
        background-color: #2F4056;
        overflow-y: auto;
        z-index: 1000;
        transition: all 0.3s ease;
    }

    /* 移动端适配 */
    @media screen and (max-width: 768px) {
        #sidebar {
            width: 60px;
        }

        #sidebar .layui-nav-item span {
            display: none;
        }

        #sidebar .layui-nav-item i {
            margin-right: 0;
            font-size: 20px;
        }

        #content {
            margin-left: 60px;
        }
    }

    /* 右侧内容区域 */
    #content {
        margin-left: 200px;
        padding: 20px;
        min-height: 100vh;
        transition: all 0.3s ease;
    }

    /* 导航项悬浮效果 */
    .layui-nav-item a:hover {
        background-color: #1E2E3E !important;
    }

    /* 导航项选中样式 */
    .layui-nav-itemed>a,
    .layui-nav-tree .layui-nav-title a,
    .layui-nav-tree .layui-nav-title a:hover {
        background-color: #1E9FFF !important;
    }
</style>

<div id="sidebar">
    <ul class="layui-nav layui-nav-tree" lay-filter="sideNav">

  

        <!-- 分类管理 -->
        <li class="layui-nav-item {% if 'category' in request.path %}layui-nav-itemed{% endif %}">
            <a href="javascript:;">
                <i class="layui-icon layui-icon-app"></i>
                <span>分类管理</span>
            </a>
            <dl class="layui-nav-child">
                <dd class=" {% if '/web/pc/category/' in request.path %}layui-nav-itemed{% endif %}"><a href="/web/pc/category/"><i class="layui-icon layui-icon-list"></i> <span>分类列表</span></a></dd>
            </dl>
        </li>

        <!-- 记账管理 -->
        <li class="layui-nav-item {% if 'account' in request.path %}layui-nav-itemed{% endif %}">
            <a href="javascript:;">
                <i class="layui-icon layui-icon-notice"></i>
                <span>记账管理</span>
            </a>
            <dl class="layui-nav-child">
                <dd class=" {% if '/web/pc/account/' in request.path %}layui-nav-itemed{% endif %}"><a href="/web/pc/account/"><i class="layui-icon layui-icon-table"></i> <span>记账记录</span></a></dd>
            </dl>
        </li>

        <!-- 退出登录 -->
        <li class="layui-nav-item" style="margin-top: auto;">
            <a href="javascript:;" id="logoutBtn">
                <i class="layui-icon layui-icon-exit"></i>
                <span>退出登录</span>
            </a>
        </li>

    </ul>
</div>

<!-- 右侧内容区域占位, 可复制到你的组件使用 -->
<!-- <div id="content"></div> -->

<script>
    // 使用layui初始化导航栏
    layui.use(['element'], function () {
        var element = layui.element;

        // 初始化导航栏
        element.init();

        // 监听导航点击事件
        element.on('nav(sideNav)', function (elem) {
            // 获取点击的导航项文本
            var title = elem.find('span:last').text();

            // 可以在这里添加页面切换逻辑
            console.log('点击了导航项：' + title);

            // 在实际项目中，这里可以根据不同的导航项加载不同的内容
            // 例如：动态加载页面内容到右侧区域

            // 示例：将点击的导航项标题显示在右侧内容区域
            // document.getElementById('content').innerHTML = '<h2>' + title + '</h2><p>这里是' + title + '的内容区域</p>';
        });

        // 监听窗口大小变化，适配不同屏幕尺寸
        window.addEventListener('resize', function () {
            var width = window.innerWidth;
            var sidebar = document.getElementById('sidebar');
            var content = document.getElementById('content');

            if (width <= 768) {
                // 移动端
                sidebar.style.width = '60px';
                content.style.marginLeft = '60px';

                // 隐藏文字
                var spans = sidebar.querySelectorAll('.layui-nav-item span');
                spans.forEach(function (span) {
                    span.style.display = 'none';
                });

                // 调整图标大小和边距
                var icons = sidebar.querySelectorAll('.layui-nav-item i');
                icons.forEach(function (icon) {
                    icon.style.marginRight = '0';
                    icon.style.fontSize = '20px';
                });
            } else {
                // 桌面端
                sidebar.style.width = '200px';
                content.style.marginLeft = '200px';

                // 显示文字
                var spans = sidebar.querySelectorAll('.layui-nav-item span');
                spans.forEach(function (span) {
                    span.style.display = 'inline-block';
                });

                // 恢复图标样式
                var icons = sidebar.querySelectorAll('.layui-nav-item i');
                icons.forEach(function (icon) {
                    icon.style.marginRight = '10px';
                    icon.style.fontSize = '16px';
                });
            }
        });

        // 初始化时触发一次窗口大小变化事件，确保正确显示
        window.dispatchEvent(new Event('resize'));
    });

    // 退出登录功能
    document.getElementById('logoutBtn').addEventListener('click', function() {
        // 弹出确认对话框
        layer.confirm('确定要退出登录吗？', {
            btn: ['确定', '取消']
        }, function() {
            // 清除所有Cookie
            function clearAllCookies() {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = cookies[i];
                    var eqPos = cookie.indexOf('=');
                    var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
                    document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/';
                }
            }
            
            // 清除localStorage
            localStorage.clear();
            
            // 清除sessionStorage
            sessionStorage.clear();
            
            // 清除Cookie
            clearAllCookies();
            
            // 跳转到分类列表页面
            window.location.href = '/web/pc/category/';
        });
    });
</script>